<template>
	<view class="message__container">
		<view class="price__container">
			<span>￥</span>
			<text>{{cost}}</text>
			<span>{{number}}人团</span>
		</view>
		
		<view class="flex-x">
			<view class="price__container item5-3">
				<del><span>原价： ￥{{price}}</span></del>
				<span> | </span>
				<span>已拼：{{sell}}件</span>
			</view>
			<view style="text-align: right;" class="price__container item5-2">
				<span>距结束：{{overTime}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				overTime: 0
			}
		} ,
		methods: {
			timeOption: function (overTime) {
				let sumTime = 0
				let hour = parseInt(overTime / 3600)
				overTime = overTime % 3600
				let minute = parseInt(overTime / 60)
				let second = overTime % 60
				
				this.overTime = (hour > 9 ? hour : '0' + hour) + '：' + (minute > 9 ? minute : '0' + minute) + '：' + (second > 9 ? second : '0' + second)
			}
		} ,
		created() {
			if(this.time > parseInt((new Date()).getTime() / 1000)) {
				this.timeOption(this.time - parseInt((new Date()).getTime() / 1000))
			}
			
			setInterval(() => {
				if(this.time > parseInt((new Date()).getTime() / 1000)) {
					this.timeOption(this.time - parseInt((new Date()).getTime() / 1000))
				}
			} ,1000);
		} ,
		props: {
			time : String , // 结束时间戳
			price: String ,  // 市场价
			cost : String ,  // 销售价
			sell : Number ,  // 卖出数量
			// 参团人数
			number: {
				type: String ,
				default: 0
			}	 
		}
	}
</script>

<style>
	.message__container {
		padding: 14rpx 30rpx;
		height: 96rpx;
		background-color: #F37B1D;
	}
	
	.message__container .price__container text{
		margin-right: 20rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	
	.message__container .price__container span{
		margin-right: 10rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	
	del{
		color: #FFFFFF;
	}
</style>
